<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <agent-list style='width: 100%' :agentids="params.agentIds" v-on:listenToChildEvent="getAentId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家名称">
            <el-input style="width: 100%" @keyup.enter.native="$refs.pagination.handleSizeChange(10)"
              placeholder="请输入内容" v-model="params.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="btn-item flex">
            <span :class="{'cur':params.selectStatus ==1}" @click="cheackTableType(1)">已完成{{tableData.doTotal}}</span>
            <span :class="{'cur':params.selectStatus ==2}" @click="cheackTableType(2)">待完善{{tableData.unDoTotal}}</span>
            <span :class="{'cur':params.selectStatus ==3}" @click="cheackTableType(3)">近七日{{tableData.total7}}</span>
          </div>
        </el-col>
        <el-col :span="$store.state.showAgent ? 6 : 12" style="text-align: right">
          <el-button type="primary" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
          <router-link :to="{'path':'/main/busnt/add1'}">
            <el-button type="primary" plain icon="el-icon-plus">新增商户</el-button>
          </router-link>
        </el-col>
      </el-row>
    </el-form>

    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="40" align="center"></el-table-column>
        <el-table-column prop="name" label="门店名称" min-width="200" align="center"></el-table-column>
        <el-table-column prop="id" label="店铺id" min-width="140" align="center"></el-table-column>
        <el-table-column prop="bossName" label="联系人" min-width="140" align="center"></el-table-column>
        <el-table-column label="门店状态" min-width="120" align="center">
          <template slot-scope="scope">{{scope.row.statusx ==-1?'无效':'有效'}}</template>
        </el-table-column>
        <el-table-column prop="createtime" label="申请时间" min-width="160" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align='center'>
          <template slot-scope="scope">
            <el-button class="el-text-check" type="text" @click="toShopData(scope.row)" size="mini">查看/修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>
  </div>
</template>
<script>
  export default {
     data() {
      return {
        isloadingTable: false, // 表单等待
        isCheacked: '1', // 选择的表格类型
        params: { // 表格查询
          page: 0,
          size: 10,
          selectStatus: 1, // 数据类型状态
          agentIds: [], // 区域
        },
        tableData: {} // 表单数据
      }
    },
     methods: {
      getAentId(item) { // 获取子组件传递的区域
        this.params.agentIds = item
        this.$refs.pagination.handleSizeChange(10)
      },
      cheackTableType(type) { // 刷选状态
        this.params.selectStatus = type
        this.$refs.pagination.handleSizeChange(10)
      },
      getTableList(type) { // 获取商户列表数据
        this.isloadingTable = true
        const params = {...this.params }
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        this.$http.get('/server/business/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      toShopData(row) {
        this.$router.push({path: '/main/busnt/add1', query: {id: row.id}})
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      }
    },
     mounted() {
      this.getTableList()
    }
  }

</script>
<style lang="scss" scoped>
  .btn-item {
    margin-left: 50px;
    span {
      min-width: 80px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      margin-left: 15px;
      color: #909399;
      &:hover {
        cursor: pointer;
      }
      &.cur {
        color: $--color-primary;
        border-bottom: 2px solid $--color-primary;
      }
    }
  }
</style>
